<template>
    <div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>考勤查询</el-breadcrumb-item>
                <el-breadcrumb-item>全部查询</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr style="border: 1px solid #F2F6FC;">
        <div class="userlist">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="日期">
                    <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="departName">
                    <el-select v-model="departId">
                        <el-option value=" " label="请选择"></el-option>
                        <el-option v-for="item in departList" :key="item.departId" :label="item.departName"
                            :value="item.departId">{{ item.departName }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="name">
                    <el-input placeholder="name" type="text" v-model="name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchUser(date, departId, name)">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="userId" label="员工编号">
                </el-table-column>
                <el-table-column prop="departId" label="部门编号">
                </el-table-column>
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <el-table-column prop="date" label="日期">
                </el-table-column>
                <el-table-column prop="onTimeDay" label="签到时间">
                </el-table-column>
                <el-table-column prop="offTimeDay" label="签退时间">
                </el-table-column>
                <el-table-column prop="isLate" label="是否迟到">
                </el-table-column>
                <el-table-column prop="isEarly" label="是否早退">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getAttendanceForAll, getDepartList } from '@/api/api'
export default {
  data () {
    return {
      date: '',
      name: '',
      departId: '',
      tableData: [],
      departList: []
    }
  },
  methods: {
    searchUser (date, departId, name) {
      const startDate = new Date(date[0])
      const endDate = new Date(date[1])
      const params = {
        startTime: startDate.getTime(),
        endTime: endDate.getTime(),
        name: name,
        departId: departId
      }
      console.log(params.startTime)
      getAttendanceForAll(params).then(res => {
        console.log(res.data)
        this.tableData = res.data.data
      })
    }
  },
  mounted () {
    getDepartList().then(res => {
      this.departList = res.data.data
    })
  }
}
</script>

<style lang="scss" scoped>
.breadcrumb {
    margin: 0px 0px 20px 0px;
}
</style>
